<template>
  <span>
    <el-input
      v-bind="$attrs"
      :disabled="!editable"
      :style="'width:' + width "
      readonly
      placeholder="请选择销售明细"
      v-on="$listeners">
      <el-button v-if="editable" slot="append" icon="el-icon-search" @click="selectItem" />
    </el-input>
    <order-item-select-list v-if="editable" ref="orderItemSelectList" :multi-select="false" @orderItemSelectCallback="orderItemSelectCallback" />
  </span>
</template>

<script>
import OrderItemSelectList from '@/views/sale/order/module/orderItemSelectList'

export default {
  components: { OrderItemSelectList },
  props: {
    paramData: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      default: true,
      required: false
    },
    width: {
      type: String,
      default: null,
      required: false
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    selectItem() {
      const _this = this.$refs.orderItemSelectList
      _this.initLoadData(this.paramData)
    },
    orderItemSelectCallback(selectedRow, sourceObject) {
      this.$emit('orderItemSelectCallback', selectedRow, this.paramData)
      sourceObject.cancel()
    }
  }
}
</script>
